<template>
    <div style="margin-left: -50px;">
        <h1 style="text-align: center;">您的购物车</h1>
        <el-card style="width:100%;margin-left: 20px">
            <template #header>
                <div style="color: red;"class="card-header">
                    <span >购物车</span>
                </div>
            </template>
            <div>
                <el-table :data="tableData" >
                    <el-table-column  label="编号" width="300" prop = "id"></el-table-column>
                    <el-table-column label="图片" width="400"  prop = "picurl">
                        <template #default="scope">
                            <el-image style="width: 80px; height: 80px" :src="scope.row.image" :fit="fit" />
                        </template>
                    </el-table-column>
                    <el-table-column label="时间" width="180" prop = "production_date"></el-table-column>
                    <el-table-column label="价格" width="180" prop = "price"></el-table-column>

                    <el-table-column width="180">
                        <template #default="scope">
                            <el-button type = "danger" @click = "remove(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <template #footer>
               
            </template>
        </el-card> 
    </div>
  <RouterView />
</template>

<script setup>
import { ref,onMounted,nextTick } from "vue";
import { ElMessage } from 'element-plus'

//显示数据
const tableData = ref([])
const query = ()=>{
    fetch("http://localhost:3000/shopcar",{
        method:'get'
    }).then(response=>response.json()).then((data)=>{
        tableData.value = data
        page.value= data
        // tabledata.value.push(...data)
    })
}
onMounted(()=>{
    query()
})
// 删除数据
const remove =(id)=>{
    fetch("http://localhost:3000/shopcar/"+id,{
        method:"delete"
    }).then(response=>response.json()).then((data)=>{
            query()
            ElMessage.warning("删除成功")
            
    })
}

</script>
   
 